<route lang="json5" type="device">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '设备',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'Result',
})
const deviceTag = [
  {
    title: '绑定设备',
    desc: '扫主机绑定码',
    icon: 'scan',
    url: '',
    bg: 'bg1',
    type: 'scan',
  },
  {
    title: '设备列表',
    desc: '配置、详情、派币',
    icon: 'fork',
    url: '/pages/device/deviceList',
    bg: 'bg2',
  },
  {
    title: '支付套餐',
    desc: '便于支付优惠政策',
    icon: 'copy',
    url: '',
    bg: 'bg3',
  },
  {
    title: '投币套餐',
    desc: '对设备设置投币管理',
    icon: 'star',
    url: '',
    bg: 'bg7',

  },
  {
    title: '标签分组',
    desc: '对设备设置标签管理',
    icon: 'usb',
    url: '',
    bg: 'bg4',

  },
  {
    title: '门店管理',
    desc: '对设备划分门店管理',
    icon: 'bags',
    url: '',
    bg: 'bg5',
  },
  {
    title: 'WIFI配置',
    desc: '具有WIFI功能硬件',
    icon: 'wifi',
    url: '',
    bg: 'bg6',
  },
]

const deviceTag2 = [
  {
    title: '设备转入',
    desc: '对方设备转进来',
    icon: 'star',
    url: '',
    bg: 'bg13',

  },
  {
    title: '设备转出',
    desc: '设备转出给对方',
    icon: 'usb',
    url: '',
    bg: 'bg14',

  },
  {
    title: '设备日志',
    desc: '设备上线下线日志',
    icon: 'bags',
    url: '',
    bg: 'bg6',
  },
]
const deviceTag3 = [
  {
    title: '流量卡',
    desc: '使用情况、到期时间',
    icon: 'file-copy',
    url: '',
    bg: 'bg7',
  },
  {
    title: '使用说明',
    desc: '视频教程、说明文档',
    icon: 'play-circle-stroke',
    url: '',
    bg: 'bg8',
  },
]
</script>

<template>
  <view class="top-content">
    <view class="circle" />
    <view class="title">
      其它功能【辅助功能】
    </view>
    <view class="desc">
      进销存系统、会员系统、通知系统、客服系统等将逐步迁入, 请按需使用.
    </view>
  </view>
  <view class="device-msg">
    <wd-icon name="a-precisemonitor" size="62px" color="#3287e1" />
    <view class="msg">
      <view class="row">
        设备数量：<view class="num">
          39768
        </view>个
      </view>
      <view class="row">
        在线设备：<view class="num success">
          8
        </view>个
      </view>
      <view class="row">
        离线设备：<view class="num">
          39760
        </view>个
      </view>
    </view>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in deviceTag" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
          <view class="menu-desc">
            {{ item.desc }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in deviceTag2" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
          <view class="menu-desc">
            {{ item.desc }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in deviceTag3" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
          <view class="menu-desc">
            {{ item.desc }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<style lang="scss" scoped>
    .pt60{
        padding-top: 60rpx;
    }
    .device-msg{
        padding: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #ffffff;
        margin: 20rpx;
        border-radius: 20rpx;
        .msg{
          color: #333;
          padding-left: 40rpx;
          .row{
            margin-bottom: 8rpx;
          }
          .num{
            display: inline-block;
            background-color: $uni-color-primary;
            color: #ffffff;
            padding: 0 8rpx;
            border-radius: 6rpx;
          }
          .success{
            background-color: $uni-color-success;
          }
        }
    }
</style>
